<template>
	<view class="box">

		<u-swiper :list="list"></u-swiper>

	<view class="boss">
				<view class="d_f ">
					<view class="pricex">
						￥{{price}}
					</view>
					<view class="old">
						 原价：￥{{old}}
					</view>
				</view>
				<view class="name">
					{{name}}
				</view>
				<view class="d_f a_i_c" style="margin-top: 47rpx;">
					<view class="fuwu">
						服务:
					</view>
					<view class="fahuo">
						48小时发货
					</view>
					<view class="fahuo">
						买贵必退
					</view>
					<view class="fahuo">
						快递包邮
					</view>
				</view>
				<view class="line">

				</view>

			</view>
		<view class="sec">
		
			<view class="xq d_f a_i_c j_c_c">
				<view class="line1">
					
				</view>
				<view class="" style="padding: 0 12rpx;">
					产品详情
				</view>
				<view class="line2">
					
				</view>
			</view>
			<view class="to">
				<view class="" v-html="del">

				</view>
			</view>
		</view>
		<view class="" style="height: 146rpx;">

		</view>
		<view class="bottom">
			<view class="d_f a_i_c j_c_s_b">
				<view class="price">
					￥{{price}}
				</view>
				<view class="botton" @click="zf">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		xcxPayTest
	} from '../../api/index.js'
	export default {
		data() {
			return {
				code: '',
				del: '',
				price: "",
				timer: null,
				images: '',
				name: "",
				list: [],
				old:""

			}
		},
		components: {

		},
		methods: {
			zf() {
				wx.chooseAddress({
					success: (resx) => {
						console.log(resx)
						var local = resx.provinceName + resx.cityName + resx.countyName + resx.detailInfo + ' '

						uni.setStorageSync('province', resx.provinceName) //省
						uni.setStorageSync('city', resx.cityName) //市
						uni.setStorageSync('countyName', resx.countyName) //区

						uni.setStorageSync('local', local)
						var name = resx.userName + ' ' + resx.telNumber
						uni.setStorageSync('tel', resx.telNumber)
						uni.setStorageSync('names', resx.userName)
						uni.setStorageSync('name', name)
						uni.showLoading({
							title: "支付中",
							mask: true
						})

						xcxPayTest({
							openid: uni.getStorageSync('openidH5'),
							code: this.code,
							address: uni.getStorageSync('local'),
							phone: uni.getStorageSync('tel'),
							name: uni.getStorageSync('names'),
							province: uni.getStorageSync('province'),
							city: uni.getStorageSync('city'),
							county: uni.getStorageSync('countyName'),
							a: uni.getStorageSync('a'),
						}).then((res) => {
							console.log(res)

							wx.requestPayment({
								timeStamp: res.data.payInfo.timeStamp,
								nonceStr: res.data.payInfo.nonceStr,
								package: res.data.payInfo.package,
								signType: 'MD5',
								paySign: res.data.payInfo.paySign,
								success: function(res) {
									console.log('支付成功')
									uni.navigateTo({
										url: '/pages/order/order'
									})
									uni.hideLoading()
								},
								fail: function(res) {
									console.log(res.errMsg)
									console.log('取消支付')

									uni.hideLoading()
								},
								complete: function(res) {
									console.log(res.errMsg)
									console.log('支付失败')
									uni.hideLoading()
								}
							})



						})

					},
					fail: (err) => {
						console.log(err)
					}
				})


			}
		},
		onLoad(option) {
			this.price = option.price
			this.old = option.oldprice
			this.del =
				'<div style="width:100%;z-index：9999">' + uni.getStorageSync('detail') + '</div>'
			console.log(this.del)
			this.del = this.del.replace(/<\/?p[^>]*>/gi, '')

			this.del = this.del.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
			this.code = uni.getStorageSync('code')
			this.images = uni.getStorageSync('images')
			this.images = this.images.split(',')

			this.list = this.images.map(item => ({
				image: 'https://oss.sx24h.cn' + item
			}));
			this.name = uni.getStorageSync('name')

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.fuwu{
	
		
	
		font-weight: 600;
		font-size: 28rpx;
		color: #000000;
		line-height: 36rpx;
	
	}
	.fahuo{
		width: 170rpx;
		height: 36rpx;
		background: #F5F5F5;
		border-radius: 6rpx;
			margin-left: 20rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #333333;
			text-align: center;
			
	}
	.box {
		background-color: white;
		min-height: 100vh;
	}

	.boss {

		width: 678rpx;


		border-radius: 18rpx;
		margin-left: 36rpx;
		padding-top: 47rpx;
		padding-left: 23rpx;
	}

	.bottom {
		padding-top: 43rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		width: 100%;
		height: 166rpx;
		


	background: #FFFEFF;
	box-shadow: 0rpx -2rpx 5rpx 0rpx rgba(25,25,25,0.07);

		margin-top: 11rpx;
		position: fixed;
		z-index: 999;
		bottom: 0;
	}

	.price {

		font-size: 46rpx;
		color: #FA2818;
	}

	.botton {
		width: 250rpx;
		height: 80rpx;
		background: #5768FF;
		border-radius: 40rpx;
		font-size: 36rpx;
		text-align: center;
		line-height: 80rpx;
		color: #FFFFFF;
	}

	.pricex {
		font-weight: 800;
		font-size: 70rpx;
		color: #000000;
	}

	.name {

		font-weight: 500;
		font-size: 30rpx;
		color: #000000;
		
		padding-top: 10rpx;

	}

	.line {
		width: 630rpx;
		height: 1px;
		background: #f5f5f5;
		margin-top: 44rpx;

	}

	.xq {

	
		padding-top: 60rpx;
		padding-bottom: 30rpx;
		font-weight: 600;
		
	}
	.line1{
		width: 36rpx;
		height: 1px;
		background: #000000;
	}
	.line2{
		width: 36rpx;
		height: 1px;
		background: #000000;
	}

	.sec {
		padding: 0 30rpx 0 30rpx;
		border-radius: 60rpx;
		overflow: hidden
	}

	.to {
		border-radius: 30rpx;
		overflow: hidden
	}
	.old{
	
		font-size: 30rpx;
		color: #4D4D4D;
		text-decoration-line: line-through;
		margin-left: 16rpx;
		padding-top: 40rpx;
		
	}
</style>